/*
 * @Author: FengKongLi 
 * @Date: 2021-08-30 00:09:59 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-09-01 15:11:07
 */
// 订单列表页
<template>
  <div>
    <!-- 列表内容 -->
    <div
      class="order_detail"
      v-for="item in orderList"
      :key="item.id"
      @click="turnDetail(item.id)"
    >
      <div class="order_item">
        <div class="flex_item1">
          <img :src="item.customer.userFace" alt="" />
        </div>
        <div class="flex_item2">
          <span class="name">{{ item.customer.username }}</span>
          <span
            v-if="item.status === '待接单'"
            class="status"
            style="color: #ff9900"
            >{{ item.status }}</span
          >
          <span
            v-else-if="item.status === '待服务'"
            class="status"
            style="color: #fff"
            >{{ item.status }}</span
          >
          <span
            v-else-if="item.status === '待派单'"
            class="status"
            style="color: #ff0033"
            >{{ item.status }}</span
          >
          <span v-else class="status" style="color: #9eea6a">{{
            item.status
          }}</span>
          <p class="address">
            {{
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            }}
          </p>
          <div class="date_price">
           
            <div class="date">{{ moment(item.serviceTime).format('YYYY/MM/DD hh:mm') }}</div>
            <!-- <div class="date">{{ item.serviceTime | fmtDateDay }}</div> -->          
            <div class="price"><span>￥</span>{{ item.total }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
// import { fmtDateDay } from "@/filters/index";
import { pageQuery } from "@/api/index";
import { info } from "@/api/user";
import moment from 'moment'
export default {
  data() {
    return {
      moment,
      // // 时间格式
      // fmtDateDay,
      //获取个人 ID
      per_id: null,
      // 所有订单数据
      orderList: [],    
       // 订单状态
      status: this.order_status,  
      
    };
  },
// prop一般用于父组件向子组件进行单向通信（父向子传值）
  props: ["order_status"],
  created() {
    this.getInfo(); 
  },
  mounted() {},
  methods: {
    // 获取个人信息
    async getInfo() {
      // console.log(this.per_id);
      const token = getToken();
      const res = await info({ token });
      this.per_id = res.data.id;
      // console.log(this.per_id);
      this.getOrderList();     
    },
    // 获取员工负责的订单信息
    async getOrderList() {
      // console.log(this.per_id);
      if (this.status === "全部") {
        this.status = null;
      }
      const res = await pageQuery({
        page: 1,
        pageSize: 20,
        employeeId: this.per_id,
        status: this.status,
      });
      this.orderList = res.data.list;    
      
    },
    // 路由跳转
    turnDetail(id) {
      this.$router.push({ path: "/oreder_deatils", query: { id: id } });
    },
  },
};
</script>

<style lang='scss' scoped>
.order_detail {
  width: 90%;
  // border: 1px solid black;
  .order_item {
    width: 98%;
    height: 87px;
    margin: 10px 5px;
    box-shadow: 0 0 6px 0 #ccc;
    display: flex;
    padding: 1em 1em;
    cursor: pointer;
    background: linear-gradient(to right bottom, #d8f2ff, #b4e3fa);
    border-radius: 10px;
    .flex_item1 {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .flex_item2 {
      margin-left: 1em;
      flex: 2;
      .name {
        color: #2747c5;
      }
      .status {
        float: right;
        font-size: 12px;
        // color: orange;
      }
      .address {
        margin-top: 1em;
        font-size: 12px;
        color: #666;
      }
      .date_price {
        margin-top: 1.5em;
        font-size: 12px;
        .date {
          float: left;
        }
        .price {
          font-size: 20px;
          float: right;
          color: #e4571e;
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>